<template>
	<div class="like">
		<div class="like-a">
			<img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
			<span>猜你喜欢</span>
		</div>
		<div class="like-bottom clearfix" v-for="item of imgList" :key="item.id">
			<img :src="item.imgUrl" alt="" class="like-l" />
			<div class="like-r">
				<p>{{ item.title }}</p>
				<span class="star">★★★★★<b class="comment">{{ item.comment }}条评论</b></span>
				<div><span class="price">￥{{ item.price }}</span>起</div>
			</div>
			<span class="address">{{ item.address }}</span>
			<div v-if="item.imgs" class="imgs">
                <img :src="item.imgs" alt="">
				<p>{{ item.al}}</p>
			</div>
		</div>		
	</div>
</template>
<script>
    export default{
    	data(){
    		return{
    			"imgList":[
    				{
    					"id":"1",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1508/c5/a017645d82ab89f271fdfb1bd6ecc2e0.water.jpg_200x200_2de772de.jpg",
    					"title":"秦岭野生动物园",
    					"comment":"10382",
    					"price":"48",
    					"address":"长安区",
    					"imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
    					"al":"随时可用"
    				},
    				{
    					"id":"2",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1602/53/53cf6caed9f9b9ee90.img.jpg_200x200_f5476a84.jpg",
    					"title":"华清宫",
    					"comment":"37442",
    					"price":"107",
    					"address":"临潼区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"3",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1511/57/57a1490e1b72901a90.img.jpg_200x200_84df18bd.jpg",
    					"title":"华清爱琴海温泉",
    					"comment":"781",
    					"price":"138",
    					"address":"临潼区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"4",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1506/1b/1bd544a2dec905ae.water.jpg_200x200_4052e326.jpg",
    					"title":"金龙峡",
    					"comment":"379",
    					"price":"45",
    					"address":"户县",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"5",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1706/85/8515d6b766575507a3.water.jpg_200x200_30acb7d3.jpg",
    					"title":"白鹿原·白鹿仓",
    					"comment":"37",
    					"price":"69",
    					"address":"灞桥区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"6",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_200x200_a0d48950.jpg",
    					"title":"秦始皇陵博物院（兵马俑）",
    					"comment":"121082",
    					"price":"120",
    					"address":"临潼区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"7",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1505/12/1207d28c272c5864.water.jpg_200x200_30119788.jpg",
    					"title":"翠华山",
    					"comment":"3066",
    					"price":"59",
    					"address":"长安区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png",
                        "al":"可订明日"
    				},
    				{
    					"id":"8",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1505/12/1207d28c272c5864.water.jpg_200x200_30119788.jpg",
    					"title":"太平国家森林公园",
    					"comment":"763",
    					"price":"56",
    					"address":"户县",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"9",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1511/a3/a3939e44477746c490.img.jpg_200x200_327e7822.jpg",
    					"title":"西安临潼悦椿温泉",
    					"comment":"1047",
    					"price":"198",
    					"address":"临潼区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png",
                        "al":"可订明日"
    				},
    				{
    					"id":"10",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1804/51/512ff9f3a6e9b1a6a3.water.jpg_200x200_f7123f52.jpg",
    					"title":"华夏文旅海洋公园",
    					"comment":"314",
    					"price":"110",
    					"address":"西安"
    				},
    				{
    					"id":"11",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1610/2d/2d6480f93f464e0a3.img.jpg_200x200_51908dc5.jpg",
    					"title":"白鹿原影视城",
    					"comment":"786",
    					"price":"59",
    					"address":"蓝田县"
    				},
    				{
    					"id":"12",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1511/94/94b0e3847694404790.img.jpg_200x200_e3bee506.jpg",
    					"title":"朱雀国家森林公园",
    					"comment":"224",
    					"price":"45",
    					"address":"户县",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"13",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1412/89/66dadfb4d982e6f88abad45a3e062342.water.jpg_200x200_0443bc40.jpg",
    					"title":"曲江海洋极地公园",
    					"comment":"10368",
    					"price":"158",
    					"address":"曲江旅游...",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png",
                        "al":"可订明日"
    				},
    				{
    					"id":"14",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1505/a0/a062762bd6d1f984.water.jpg_200x200_c3e82003.jpg",
    					"title":"楼观道温泉",
    					"comment":"85",
    					"price":"118",
    					"address":"终南山古..."
    				},
    				{
    					"id":"15",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1803/64/640e09a14fc88b32a3.img.jpg_200x200_2843f542.jpg",
    					"title":"秦岭国家植物园",
    					"comment":"47",
    					"price":"42",
    					"address":"周至县"
    				},
    				{
    					"id":"16",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/201301/11/dd368e9b8629027693835fbb.jpg_200x200_8e79864a.jpg",
    					"title":"西安唐乐宫",
    					"comment":"326",
    					"price":"218",
    					"address":"碑林区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"17",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1709/36/365002639215a865a3.img.jpg_200x200_c710f658.jpg",
    					"title":"梦回大秦",
    					"comment":"250",
    					"price":"80",
    					"address":"临潼区"
    				},
    				{
    					"id":"18",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/201301/11/092661ec2e8bc19893835fbb.jpg_200x200_447a56f4.jpg",
    					"title":"西安秦岭欢乐世界",
    					"comment":"2021",
    					"price":"39",
    					"address":"长安区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"19",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1507/c4/21286eaf6ccc0df78b834a7db50f0e4a.water.jpg_200x200_3d42595d.jpg",
    					"title":"中国唐苑",
    					"comment":"237",
    					"price":"35",
    					"address":"雁塔区"
    				},
    				{
    					"id":"20",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/201403/10/55275671bb48cf2103d155523f89df78.jpg_200x200_dc2e85c2.jpg",
    					"title":"南五台",
    					"comment":"446",
    					"price":"40",
    					"address":"终南山",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"21",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/201403/10/1a48fb857c8ff2bffba1b07c20c69974.jpg_200x200_bc48e37d.jpg",
    					"title":"汤峪温泉碧水湾",
    					"comment":"234",
    					"price":"38",
    					"address":"蓝田县",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"22",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/201301/18/a5de115bb3c6c53e93835fbb.jpg_200x200_292e639d.jpg",
    					"title":"大雁塔北广场",
    					"comment":"156",
    					"price":"189",
    					"address":"曲江旅游..."
    				},
    				{
    					"id":"23",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1902/8a/8aa77504c364b4b6a3.img.jpg_200x200_d1af1f23.jpg",
    					"title":"大唐芙蓉园",
    					"comment":"27188",
    					"price":"108",
    					"address":"曲江旅游..."
    				},
    				{
    					"id":"24",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/201403/10/b0e7eeb18db9a7dc4f0376a13d4ab15d.jpg_200x200_3ff00ade.jpg",
    					"title":"西安关中民俗艺术博物院",
    					"comment":"426",
    					"price":"99.9",
    					"address":"长安区",
                        "imgs":"https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png",
                        "al":"随时可用"
    				},
    				{
    					"id":"25",
    					"imgUrl":"http://img1.qunarzz.com/sight/p0/1411/b8/f5fd5955bdecc923ce6d40ce453160eb.water.jpg_200x200_5032ab39.jpg",
    					"title":"陕西历史博物馆",
    					"comment":"41262",
    					"price":"30",
    					"address":"雁塔区"
    				}
    			]
    		}
    		
    	}
    }
</script>
<style scoped lang="stylus">
    @import  '~@/assets/css/common.styl'
	.like{
		margin-top:0.2rem;
		background:#fff;
	}
	.like-a{
		overflow:hidden;
		padding:.24rem 0 0.26rem;
	}
	.like-bottom{
		padding:0.3rem 0.2rem 0.6rem;
		border-bottom:solid 1px #e0e0e0;
		position:relative;
	}
	.like-a img{
		display:block;
		width:0.3rem;
		height:0.3rem;
		margin-left:0.3rem;
		float:left;
		position:relative;
		top:2px;
	}
	.like-a span{
		display:block;
		color:#212121;
		font-size:0.32rem;
		float:left;
		margin-left:0.08rem;
		line-height:0.44rem;
	}
	.like-r p{
		margin-top:0.26rem;
		color:#212121;
		font-size:0.32rem;
		line-height:0.44rem;
	}
	.star{
		font-size:0.28rem;
		color:#ffb436;
		line-height:0.4rem;
		display:block;
		margin-top:0.2rem;
	}
	.price{
		font-size:0.4rem;
		color:#ff8300;
	}
	.like-r div{
		font-size:0.24rem;
		color:#616161;
		margin-top:0.22rem;
	}
	.clearfix:after{
		content:"";
		display:block;
		clear:both;
	}
	.like-l{
		float:left;
		width:2rem;
		height:2rem;
	}
	.like-r{
		float:left;
		margin-left:0.3rem;
	}
	.comment{
		font-weight:normal;
		font-size:0.24rem;
		color:#616161;
		margin-left:0.2rem;
	}
	.address{
		float:right;
		margin-right:0.24rem;
		font-size:0.24rem;
		color:#616161;
		margin-top:1.7rem;
	}
	.imgs{
        width:1.02rem;
        height:0.38rem;
		position:relative;
		top:-2rem;
		left:0;
	}
	.imgs img{
        display:block;
		width:1.02rem;
		height:0.38rem;
	}
	.imgs p{
		color:#fff;
		font-size:0.2rem;
		line-height:0.38rem;
		text-indent:0.04rem;
        position:relative;
        top:-0.38rem;
        left:0;
	}
</style>